<template>
    <div id="body">
    <el-container style="width:100%">
    <el-header style="background-color:#242F41;background-image:url(../assets/2.jpg)">
        <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple" style="color:white">租车后台管理系统</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">1</div></el-col>
        <el-col :span="4">
                    	<div class="grid-content bg-purple-light">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#242F41"
                                text-color="#fff"
                                active-text-color="#ffd04b">

                            <el-submenu index="2">
                                <template slot="title">{{userName}}-{{realName}}</template>
                                <el-menu-item index="2-1">个人中心</el-menu-item>
                                <el-menu-item  index="2-2">切换账号</el-menu-item>
                                <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4"><a href="javascript:location.reload();void(0);">首页</a></el-menu-item>
                        </el-menu>
                    	</div>
        </el-col>
        <el-col :span="4"><div class="time">{{date}}</div></el-col>
        </el-row>
    </el-header>
    <el-container>
        <el-aside width="200px">
            <!-- 头像 -->
            <img :src="headPic" class="userAvatar"
                         style="display: block;width: 80px;height: 80px;
                         border-radius: 50%;-webkit-border-radius: 50%;
                         -moz-border-radius: 50%;
                         border: 4px solid #44576b;box-sizing: border-box;margin: 10px auto 10px;">
                    <p style=" display: block;width: 100%;height: 25px;color: #ffffff;text-align: center;font-size: 12px;white-space: nowrap;line-height: 25px;overflow: hidden;">
                        你好！<span class="userName">{{realName}}</span>, 欢迎回来
                    </p>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="tree"></el-tree>
        </el-aside>
        <el-container>
        <el-main>
          <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                        <iframe :src="item.url" name="main" scrolling="no" frameborder="0"></iframe>
                    </el-tab-pane>
          </el-tabs>
        </el-main>
        <!-- <el-main> <router-view/> </el-main> -->
        <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
    </el-container>
    </div>
</template>
<script>
export default {
     data() {
      return {
        //树数据
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        //tabs 标签页
        editableTabsValue: '1',
        editableTabs: [{
          title: '后台默认首页',
          name: '1',
          url:'http://localhost:8088/#/admin'
        }],
        tabIndex: 1,
        date: new Date(),
        userInfo:{},
        userName:'',
        realName:'',
        headPic:'../assets/4.gif'
      };
    },
    created:function(){
        var userId = localStorage.getItem("userId");
             var userName = localStorage.getItem("userName");
              var loginName = localStorage.getItem("loginName");
              this.headPic=localStorage.getItem("avatar");
              this.userName=userName;
              this.realName=loginName;
        //动态菜单请求
        this.$http.get("/api/cs/menu/queryNodesByUserId?userId="+localStorage.getItem("userId")).then((response) => {
                console.log(response.data)
                 this.data=response.data.data;
        })
        //动态路由请求
          this.$http.get("/api/cs/menu/queryUrlIsNotNull").then((response) => {
                console.log(response.data)
                 var dataJson  =  response.data.data;
                 if(dataJson!=null&&dataJson!=''){
                   var  routes=[];
                     //循环
                   dataJson.forEach(element => {
                    routes.push({path:element.url,name:element.menuName,component: () => import('@/views/'+element.url+'.vue')});
                   });
                  // for (let i=0; i< dataJson.length;i++) {
                  //           routes.push({
                  //           //   path:menuList[i].url,
                  //           // name:menuList[i].menuName,
                  //           // component:() => import('@/views'+menuList[i].url+'.vue')
                  //            path: dataJson[i].url,
                  //            name: dataJson[i].menuName,
                  //            component: () => import('@/views'+dataJson[i].url+'.vue')
                  //           });
                  //    }
                      //给main追加子路由
                    this.$router.options.routes[1].children = routes;
                   //使路由生效
                   this.$router.addRoutes(this.$router.options.routes);
                   console.log(JSON.stringify(routes)+"拼装json....")
                 }
                
              })
    },
    mounted() {
        let that= this;
        this.timer = setInterval(function() {
        that.date = new Date().toLocaleString();
        });
    },
    beforeDestroy: function() {
        if (this.timer) {
        clearInterval(this.timer);
        }
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        if(data.url!=null&&data.url!=''
                    &&data.url!='null'&&data.url!=undefined) {
                    // addTab 两个参数： 第一个标签页名称 第二参数请求的url地址
                    // this.$router.push(data.url);
                    this.addTab(data.label, data.url);
        }
      },
      //添加标签页
            addTab(tabName,menuUrl) {
                let newTabName = ++this.tabIndex + '';
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签白变量
                var  isHaveTab = false;
                //tabs = [{title:'后台默认首页',name:'1', url:'https://www.baidu.com'},{title:'用户添加',name:'2', url:'https://www.baidu.com'},{title:'用户更新',name:'3', url:'https://www.baidu.com'}.。。。]
                //循环所有页签页   当前点击的叫部门管理
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(tabName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });
                //原标签页中不存在新加title时，添加新标签页
                //过去写法  不好   不会高亮
                /*  var jsonTabs = JSON.stringify(this.editableTabs);
                  if(jsonTabs.indexOf(tabName)==-1){
                      this.editableTabs.push({
                          title: tabName,
                          name: newTabName,
                          url: menuUrl
                      });
                  }*/
                if(!isHaveTab) {
                    this.editableTabs.push({
                        title: tabName,
                        name: newTabName,
                        url: "http://localhost:8088/#/"+menuUrl
                    });
                }
                //高亮显示
                this.editableTabsValue = newTabName;
            },
            //移除标签页
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                console.log(targetName+"....."+activeName);
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //导航栏处理方法
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
            //退出
            logout(){
                    localStorage.setItem("token","");
                    this.$router.push('/login');
            }
    }
  };

</script>
<style>
    .el-header {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            font-weight: bold;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .el-aside {
            background-color: lightblue;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
            overflow: hidden;
            height: 780px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        iframe{
            width: 100%;
            height: 100%;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 30px;
            font-weight: bold;
            opacity: 0.75;
            line-height: 100px;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: lightblue;
            /*background-image: url("/static/imgs/1.jpg");*/
            /*background-image: url("/static/images/2.bmp");*/
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: aquamarine;
            /*background-image: url("/static/imgs/2.jpg");*/
        }
        .el-tabs{
            height: 730px;
        }
        .el-tab-pane{
            height: 630px;
        }
        .time{
            color:white;
        }
        .tree{
            font-size: 20px;
            font-weight: bold;
        }
        /* #body{
            transform: scale(1,1);
            
        } */
        /* 页面缩放 */
        /* #body {
            zoom: 0.8;
            -moz-transform: scale(1);
            -moz-transform-origin: 0 0;
        } */
        /* #body { 
            zoom: 3; 
            -moz-transform: scale(3); 
            -moz-transform-origin: 0 0;
        }  */
</style>
